<template>
	<div>
		<!-- xpert导航栏 -->
		<xpertNavBar :statusTab="statusTab" />
		<div style="height: 150px; width: 100%"></div>
		<!-- Application   -->
		<div class="application m1280">Application</div>
		<!-- Nathan Sudds  -->
		<div class="sudds m1280">
			<div class="top f f-a-c f-j-b">
				<div class="left f f-a-c">
					<img :src="obj.buyerAvatar" style="object-fit: cover" alt="" />
					<div class="name">
						<div class="topName">{{ obj.buyerFirstName }} {{ obj.buyerLastName }}</div>
						<div class="ago">{{ getTimes(obj.lastLogin) }}</div>
					</div>
				</div>
				<div class="right">
					<div class="topZan f f-a-c">
						<div @click.stop="goHasLike(item)" class="star hand f f-a-c">
							<img v-if="obj.hasLike" src="/src/assets/user/star2.png" alt="" />
							<img v-else src="/src/assets/user/star.png" alt="" />
							<span style="margin-top: 2px; margin-left: 2px">{{ obj.likeNum }}</span>
						</div>
						<div @click="goApply" class="btn hand f f-a-c f-j-c"><img src="/src/assets/user/feiji.png" alt="" /> Apply</div>
					</div>
					<div class="applications">{{ obj.requestApplyRespVOS?.length || 0 }} applications</div>
				</div>
			</div>

			<!-- 文本 -->
			<div class="biao">
				<div class="title">{{ obj.descriptionTitle }}</div>
				<div class="count">
					{{ obj.descriptionDetail }}
				</div>
			</div>
			<!-- topcs -->
			<div class="topcs f f-a-c">
				<div class="topics">Topics：</div>
				<div v-for="(ite, ind) in obj.topicNames" :key="ind" class="neiItem">{{ ite }}</div>
			</div>
			<!-- 线 -->
			<div class="xian"></div>
			<!-- 2 applications -->
			<div class="applications">{{ obj.requestApplyRespVOS?.length || 0 }} applications</div>
			<!-- box -->
			<div v-for="(item, index) in obj.requestApplyRespVOS" :key="index" class="boxItme">
				<div class="f f-a-c f-j-b">
					<div class="leftImg f f-a-c">
						<img :src="item.sellerAvatar" alt="" />
						<div class="jonh f f-d-c f-j-c">
							<div class="nickName">{{ item.sellerFirstName }} {{ item.sellerLastName }}</div>
							<div class="count o-f-1">{{ item.sellerMyDescribe }}</div>
						</div>
					</div>
					<div class="cen f f-d-c f-j-c">
						<div class="duration">Estimated duration</div>
						<div class="durationPrice">{{ item.suggestDuration }} mins</div>
					</div>
					<div class="cen f f-d-c f-j-c">
						<div class="duration">Priice offer</div>
						<div class="durationPrice">$ {{ item.priceOffer }}</div>
					</div>
					<!-- 是自己才会显示
					<div v-if="item.sellerUserId == userId" class="cen">
						<div @click="goUseCustomizeOrder(item)" class="btnAcc hand">Accept</div>
					</div> -->
				</div>
				<!-- <div v-if="item.message" v-html="item.message" class="botCount"></div> -->
			</div>
			<!-- <div class="boxItme f f-a-c">
				<div class="leftImg f f-a-c">
					<img src="/src/assets/tou.png" alt="" />
					<div class="jonh f f-d-c f-j-c">
						<div class="nickName">John Desborough</div>
						<div class="count o-f-1">Expert in Enterprise Level Web and Mobile Application Development</div>
					</div>
				</div>
				<div class="cen f f-d-c f-j-c">
					<div class="duration">Estimated duration</div>
					<div class="durationPrice">30 mins</div>
				</div>
				<div class="cen f f-d-c f-j-c">
					<div class="duration">Estimated duration</div>
					<div class="durationPrice">30 mins</div>
				</div>
			</div> -->
			<div style="margin-top: 50px; margin-bottom: 0px" class="hand">
				<div class="example-pagination-block f f -a-c f-j-c">
					<el-pagination @size-change="sizeChange" :default-page-size="2" @current-change="currentChange" layout="prev, pager, next" :total="total" />
				</div>
			</div>
		</div>
		<xpertTabbar />
	</div>
</template>

<script setup>
	import { ref, onMounted } from "vue";
	import { EchoRequestCount, ChangLive } from "@/api/xpert.js";
	import { useRoute } from "vue-router";
	import xpertTabbar from "@/components/tabBar/xpertTabbar.vue";
	import { ElMessage } from "element-plus";

	import xpertNavBar from "@/components/navBar/xpertNavBar.vue";
	import { getTimes } from "@/utils/setting.js";
	import router from "@/router/index.js";
	import ButtonDiffuse from "@/components/Button/ButtonDiffuse.vue";
	let total = ref(0);
	let statusTab = ref(1);
	let pageNum = ref(1);
	let pageSize = ref(2);
	let route = useRoute();
	let obj = ref({});
	let id = route.query.id || 0;
	let userId = JSON.parse(localStorage.getItem("logininfo")).userIdXp;
	onMounted(() => {
		initList();
		window.addEventListener("scroll", handleScroll);
	});
	const initList = async () => {
		let n = await EchoRequestCount({
			id: id,
			pageNum: pageNum.value,
			pageSize: pageSize.value
		});
		obj.value = n.data;
		total.value = n.data.total;
	};
	// 这个是添加喜欢
	const goHasLike = async item => {
		let n = await ChangLive({ id: obj.value.id });
		if (n.code == 200) {
			ElMessage.success(n.msg);
			initList();
		}
	};
	const currentChange = e => {
		pageNum.value = e;
		initList();
	};
	// 去申请
	const goApply = () => {
		router.push({
			path: "/Request/RequestApply",
			query: {
				id: id
			}
		});
	};
	// 这个是当头部导航栏滑倒下面时给tabr加个背景
	const handleScroll = () => {
		const scrollTop = document.documentElement.scrollTop;
		if (scrollTop > 0) {
			statusTab.value = 2;
		} else {
			statusTab.value = 1;
		}
	};
</script>
<style scoped>
	@import "./index.scss";
	::v-deep .el-pager li:hover {
		color: #000000 !important;
	}

	::v-deep .el-pager li.is-active {
		color: #000000 !important;
	}

	::v-deep .el-pagination button:hover {
		color: #000000 !important;
	}

	::v-deep .el-pager li {
		font-size: px(24) !important;
		margin: 0 8px;
	}

	::v-deep .el-pagination .btn-next .el-icon {
		font-size: 20px !important;
	}

	::v-deep .el-pagination .btn-prev .el-icon {
		font-size: 20px !important;
	}
</style>
